import { memo, useCallback } from 'react';
import type { ReactNode, FC } from 'react';
import { RankItemWarpper } from './style';
import { getImgOnSize } from '@/utils/format';
import { useAppDispatch } from '@/store/hooks';
import { fetchRankDetail, setCurrentRank } from '@/views/discover/c-components/ranking/store/rank';
interface IProps {
  children?: ReactNode;
  rank: any;
  currentName: string;
}

const RankItem: FC<IProps> = (props) => {
  const { rank, currentName } = props;
  const isActive = currentName == rank.name ? 'active' : '';
  const dispatch = useAppDispatch();

  const handleOnClick = useCallback(() => {
    // console.log(1);
    dispatch(fetchRankDetail(rank.id));
  }, []);
  return (
    <RankItemWarpper onClick={handleOnClick} className={isActive}>
      <div className="RankImg">
        <img src={getImgOnSize(rank.coverImgUrl, 40)} alt={rank.name} />
      </div>
      <div className="info">
        <a className="name">{rank.name}</a>
        <span>{rank.updateFrequency}</span>
      </div>
    </RankItemWarpper>
  );
};

export default memo(RankItem);
